<template>
  <div class="org-days">
    <div class="org-days-title">
      <div class="content_title2">
        <div
          v-for="(item, index) in itemList"
          :key="index"
          class="content_title2_r"
          @click="staticOneCli(item)"
          :class="{ title_select: item.id == activeChoose }">
          <div class="content_title2_top1">{{ item.number }}</div>
          <div class="content_title2_top2">{{ item.name }}(人)</div>
        </div>
      </div>
    </div>
    <div class="table_one">
      <vxe-table
        class="mytable-scrollbar"
        border
        stripe
        row-id="id"
        size="medium"
        resizable
        :loading="loading2"
        :data="tableOne"
        :header-cell-class-name="table_col"
        highlight-hover-row
        max-height="100%"
        :row-config="{ isCurrent: true, isHover: true }"
        :filter-config="{ remote: true }"
        @cell-click="tableRowChange"
        @filter-change="filterChange"
        ref="vxeTable">
        <vxe-column
          field="leaveTypeName"
          :title="activeChoose == '8' ? '请假类型' : '公务外出类型'"
          align="center"
          key="leaveTypeName"
          :filters="filterList"
          v-if="['8', '9'].includes(activeChoose)"></vxe-column>
        <vxe-column field="orgName" title="部门" align="center"></vxe-column>
        <vxe-column field="userName" title="姓名" align="center"></vxe-column>
        <vxe-column field="postName" title="职务" align="center"></vxe-column>
        <!-- <vxe-column field="leaveTypeName" title="考勤状态" align="center" key="leaveTypeName" v-if="['8', '9'].includes(activeChoose)"></vxe-column> -->
        <vxe-column
          field="punchTime"
          :title="activeChoose == '1' ? '上班打卡时间' : '下班打卡时间'"
          align="center"
          key="punchTime"
          v-if="['1', '2'].includes(activeChoose)"></vxe-column>
        <vxe-column
          field="checkTypeName"
          title="考勤结果"
          align="center"
          key="checkTypeName"
          v-if="['1', '2', '4'].includes(activeChoose)">
          <template #default="{ row }">
            <div v-if="row.hours === '未打卡'">{{ row.hours }}</div>
            <div v-else>{{ row.checkTypeName }}{{ row.hours }}</div>
          </template>
        </vxe-column>
        <vxe-column
          field="startTime"
          :title="
            activeChoose == '8'
              ? '请假开始时间'
              : activeChoose == '9'
              ? '外出开始时间'
              : activeChoose == '7'
              ? '调休开始时间'
              : '加班开始时间'
          "
          align="center"
          key="startTime"
          v-if="['5', '7', '8', '9'].includes(activeChoose)"></vxe-column>
        <vxe-column
          field="endTime"
          :title="
            activeChoose == '8'
              ? '请假结束时间'
              : activeChoose == '9'
              ? '外出结束时间'
              : activeChoose == '7'
              ? '调休结束时间'
              : '加班结束时间'
          "
          align="center"
          key="endTime"
          v-if="['5', '7', '8', '9'].includes(activeChoose)"></vxe-column>
        <vxe-column
          field="days"
          :title="
            activeChoose == '8'
              ? '请假天数(天)'
              : activeChoose == '9'
              ? '外出天数(天)'
              : activeChoose == '7'
              ? '调休天数(天)'
              : ''
          "
          align="center"
          key="days"
          v-if="['7', '8', '9'].includes(activeChoose)">
          <template #default="{ row }">
            <div class="detail_box">
              <span>{{ row.days }}</span>
              <span class="word_tip" v-if="row.leaveType == '25'">
                <el-popover placement="bottom" width="300" trigger="hover">
                  工作日为{{ row.days }}天，每天一小时
                  <i class="el-icon-info" slot="reference"></i>
                </el-popover>
              </span>
            </div>
          </template>
        </vxe-column>
        <vxe-column
          field="hours"
          :title="
            activeChoose == '8'
              ? '请假时长(h)'
              : activeChoose == '9'
              ? '外出时长(h)'
              : activeChoose == '7'
              ? '调休时长(h)'
              : '加班时长'
          "
          align="center"
          key="hours"
          v-if="['5', '7', '8', '9'].includes(activeChoose)"></vxe-column>
        <vxe-column
          field="startTime"
          title="上班打卡时间"
          align="center"
          key="startTime"
          v-if="['11', '12'].includes(activeChoose)"></vxe-column>
        <vxe-column
          field="endTime"
          title="下班打卡时间"
          align="center"
          key="endTime"
          v-if="['11', '12'].includes(activeChoose)"></vxe-column>
        <vxe-column
          field="attendanceResult"
          title="考勤结果"
          align="center"
          key="attendanceResult"
          v-if="['11', '12'].includes(activeChoose)">
          <template #default="{ row }">
            <div :class="{ color_yelloe: row.attendanceResult != '正常' }" v-if="row.attendanceResult">
              {{ row.attendanceResult }}
            </div>
            <div v-else-if="!showResult && row.attendanceResult == ''">—</div>
          </template>
        </vxe-column>
        <vxe-column field="endTime" title="打卡时间" align="center" key="endTime" v-if="activeChoose == '4'">
          <template #default="{ row }">
            <div v-if="row.startTime || row.endTime">
              {{ row.startTime }}-
              <span v-if="row.endTime">{{ moment(row.endTime).format('HH:mm') }}</span>
            </div>
            <div v-else>—</div>
          </template>
        </vxe-column>
      </vxe-table>
    </div>
    <el-pagination
      class="page-r"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      :page-size="tablePage.pageSize"
      :current-page="tablePage.currentPage"
      layout="prev, pager, next,total"
      :total="tablePage.total"
      hide-on-single-page></el-pagination>
    <XnDialog
      title="考勤登记单"
      :visible.sync="inforDiaShow"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      width="76%"
      class="branch_dialog"
      @close="inforDiaShow = false">
      <AttendOneRight
        staticsShow="1"
        :id="activeInfo.id"
        :formId="activeInfo.formId"
        :keysItem="activeInfo"
        ref="inforDetail"
        pageFrom="dialog" />
    </XnDialog>
  </div>
</template>

<script>
import moment from 'moment'
import { getListLeaveType, getAttendanceSumOrg, getAttendanceStatusOrg } from '@apis/api-attendance.js'
import AttendOneRight from '../components/AttendOneRight.vue'
import XnDialog from '@com/xnDialog.vue'
moment.locale('zh-cn')
export default {
  components: { AttendOneRight, XnDialog },
  props: {
    showAll: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      itemList: [
        { id: '11', name: '总人数', number: 0, list: [] },
        { id: '12', name: '已打卡', number: 0, list: [] },
        { id: '1', name: '迟到', number: 0, list: [] },
        { id: '2', name: '早退', number: 0, list: [] },
        { id: '4', name: '旷工', number: 0, list: [] },
        { id: '8', name: '请假', number: 0, list: [] },
        { id: '9', name: '公务外出', number: 0, list: [] },
        { id: '5', name: '加班', number: 0, list: [] },
        { id: '7', name: '调休', number: 0, list: [] },
      ],
      activeChoose: '11',
      tableOne: [],
      tablePage: {
        currentPage: 1,
        pageSize: 10,
        total: 0,
      },
      selectData: {
        time: '',
        orgId: '',
        userId: '',
      },
      showResult: true,
      moment: moment,
      loading2: false,
      inforDiaShow: false,
      activeInfo: {
        id: '',
        formId: '1',
        processInstanceId: '',
      },
      filterList: [],
      filterStr: '',
    }
  },
  created() {},
  mounted() {},
  methods: {
    getOrgLevelStatistics(time, orgId, userId) {
      this.loading = true
      this.selectData = {
        time: time,
        orgId: orgId,
        userId: userId,
      }
      this.activeChoose = '11'
      if (time === moment().format('YYYY-MM-DD')) {
        this.showResult = false
      }
      this.tablePage.currentPage = 1
      this.filterStr = ''
      getAttendanceSumOrg({
        attendanceDate: '',
        startTime: time,
        endTime: time,
        userId: userId,
        orgId: orgId,
      }).then(res => {
        this.loading = false
        this.formData = res.data
        this.itemList[0].number = res.data.shouldAttendCount || 0
        this.itemList[1].number = res.data.attendCount || 0
        this.itemList[2].number = res.data.lateCount || 0
        this.itemList[3].number = res.data.leaveEarlyCount || 0
        this.itemList[4].number = res.data.neglectWorkCount || 0
        this.itemList[5].number = res.data.leaveCount || 0
        this.itemList[6].number = res.data.outWorkCount || 0
        this.itemList[7].number = res.data.overTimeCount || 0
        this.itemList[8].number = res.data.leaveOffCount || 0
        this.getOrgTable()
      })
    },

    staticOneCli(item) {
      if (item.id === this.activeChoose) {
        return
      }
      this.activeChoose = item.id
      this.tablePage.currentPage = 1
      this.filterStr = ''
      this.getOrgTable()
      if (item.id === '8' || item.id === '9') {
        this.getListLeaveType()
      }
    },

    // 获取部门列表
    getOrgTable() {
      this.loading = true
      getAttendanceStatusOrg({
        pageSize: this.tablePage.pageSize,
        currentPage: this.tablePage.currentPage,
        param: {
          startTime: this.selectData.time,
          endTime: this.selectData.time,
          orgId: this.selectData.orgId,
          userId: this.selectData.userId,
          type: this.activeChoose,
          leaveId: this.filterStr || '',
        },
      }).then(res => {
        if (res.status === 200) {
          this.loading = false
          this.tableOne = res.data.content
          this.tablePage.total = res.data.totalSize
        }
      })
    },

    handleCurrentChange(e) {
      this.tablePage.currentPage = e
      this.getOrgTable()
    },
    handleSizeChange(e) {
      this.tablePage.pageSize = e
      this.getOrgTable()
    },
    tableRowChange({ row }) {
      if (['7', '8', '9'].includes(this.activeChoose)) {
        this.activeInfo = {
          id: row.dailyId,
          formId: row.formId,
          processInstanceId: row.processInstanceId,
        }
        this.inforDiaShow = true
      }
    },
    filterChange({ values }) {
      this.filterStr = values.join(',')
      this.getOrgTable()
    },
    /* 头部样式 */
    table_col({ row, column, rowIndex, columnIndex }) {
      return 'table_col'
    },
    getListLeaveType() {
      this.loading = true
      getListLeaveType({
        startTime: this.selectData.time,
        endTime: this.selectData.time,
        orgId: this.selectData.orgId,
        userId: this.selectData.userId,
        type: this.activeChoose,
      }).then(res => {
        if (res.status === 200) {
          this.loading = false
          const arr = []
          res.data.forEach(li => {
            arr.push({
              label: li.typeName,
              value: li.leaveType,
            })
          })
          this.filterList = arr
          const $table = this.$refs.vxeTable
          const column = $table.getColumnByField('leaveTypeName')
          $table.setFilter(column, this.filterList)
          $table.updateData()
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.org-days {
  height: 100%;
  .org-days-title {
    height: 100px;
    padding: 10px;
  }
  .content_title2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #ececec;
    padding: 10px;
    .title_select {
      padding: 4px 6px;
      background-color: #409eff;
      color: #fff;
      .content_title2_top1,
      .content_title2_top2 {
        color: #fff !important;
      }
    }
    .color_black {
      color: #333;
    }
    .content_title2_r {
      text-align: center;
      cursor: pointer;
      color: #409eff;
      .content_title2_top1 {
        font-weight: bold;
        font-size: 16px;
        line-height: 30px;
      }
      .content_title2_top2 {
        color: #c0c4cc;
      }
    }
  }
  .table_one {
    padding: 0 10px;
    height: calc(100% - 150px);
    display: flex;
    flex-direction: column;
    .el-table {
      border-left: 1px solid #ececec;
      width: 99.9%;
    }
    .color_yelloe {
      color: #cccc13;
    }
  }
  .el-pagination {
    text-align: right;
  }
  .page-r {
    text-align: right;
  }
  .mytable-scrollbar {
    flex: 1;
    /deep/.vxe-table--render-wrapper {
      height: 100%;
      .vxe-table--main-wrapper {
        height: 100%;
        display: flex;
        flex-direction: column;
        .vxe-table--body-wrapper {
          flex: 1;
        }
      }
    }
    .detail_box {
      // position: relative;
      .word_tip {
        position: absolute;
        right: 5px;
        bottom: 0;
        color: #999;
      }
    }
  }
}
</style>
